<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>文件上传</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/diyUpload.css">
<link rel="stylesheet" type="text/css" href="/css/webuploader.css">
 <script type="text/javascript" src="/js/webuploader.html5only.min.js"></script>
<script type="text/javascript" src="/js/diyUpload.js"></script>
<style>

*{ margin:0; padding:0;}

#box{ margin:50px auto; width:540px; min-height:400px; background:#FF9}

#demo{ margin:50px auto; width:540px; min-height:600px; background:#CF9}

</style>

<!-- ajaxSubmit -->
<!-- <script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script> -->
<!-- ajaxfileupload -->
<!-- <script type="text/javascript" src="/js/ajaxfileupload.js"></script> -->
</head>
<body>
<!-- diyUpload 插件上传图片 -->
<!-- <img src="/storage/201802/7026822f12ca2fe1bc3fbabdd15e1c90.jpg" alt=""> -->
<input type="file" name="files" class="webuploader-element-invisible" accept="image/*">

<div id="demo">
    <div id="as" >
    </div>
</div>
<!-- ajaxSubmit 上传 -->
<!-- <img src="/storage/201802/7026822f12ca2fe1bc3fbabdd15e1c90.jpg" style="width: 200px;height: 200px;" class="up_img" alt="点击上传" onclick="upload(0)">
<img src="/storage/201802/7026822f12ca2fe1bc3fbabdd15e1c90.jpg" style="width: 200px;height: 200px;" class="up_img" alt="点击上传" onclick="upload(1)">
</body>
</html>
<form id="up_frm" style="display: none;" method="post">
<input class="up_pic" type="file" name="file">
<input class="up_pic" type="file" name="file">
</form> -->
<!--    <p>
<img id="pic" src="/storage/201802/7026822f12ca2fe1bc3fbabdd15e1c90.jpg" style="width: 200px;height: 200px;" alt="点击上传">
<input type="file" id="file1" name="file" style="display: none;" />
</p>
   <input id="up_btn"  disabled="disabled" type="button" value="上传" onclick="ajaxFileUpload();" /> -->
 <script type="text/javascript">
/*
* 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;
* 其他参数同WebUploader
*/
$('#as').diyUpload({
    url:'/admin/file',
    formData: { _token: "{{csrf_token()}}"}, //Laravel 框架下需要 csrf_token 才能上传，可以在 formData 里面添加需要带过去的参数
    dataType:"json",
    success:function( data ) {
        console.info( data );
    },
    error:function( err ) {
        console.info( err );  
    },
    buttonText : '选择文件',
    chunked:true,
    // 分片大小
    chunkSize:512 * 1024,
    //最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
    fileNumLimit:3,
    fileSizeLimit:500000 * 1024,
    fileSingleSizeLimit:50000 * 1024,
    accept: {}
});
</script>
<!-- <script type="text/javascript">
var i=0;
function upload(index){
    i=index;
    $('.up_pic').eq(index).click();
};
$(".up_pic").change(function(){
    $("#up_frm").ajaxSubmit(
        {
            url:'/admin/file',
            dataType:'json',
            type:'post',
            data:{"_token":"{{ csrf_token() }}"},
            success:function(data){
                $(".up_img").eq(i).attr('src','/storage/'+data.path);
            },
            error:function(err){
                console.log(err);
                alert('上传失败');
            }
    });
});
</script> -->

<script type="text/javascript">
$("#pic").click(function(event) {
    $("#file1").click();
});
$("#file1").change(function(){
    console.log(this.files[0]);
    var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
    if (objUrl) {
        $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
        $("#up_btn").attr("disabled",false);
    }
});
//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
function ajaxFileUpload() {
    $.ajaxFileUpload({
            url: '/admin/file', //用于文件上传的服务器端请求地址
            secureuri: false, //是否需要安全协议，一般设置为false
            fileElementId: 'file1', //文件上传域的ID
            dataType: 'json', //返回值类型 一般设置为json
            data:{"_token":"{{ csrf_token() }}"},
            type:'post',
            success: function (data, status)  //服务器成功响应处理函数
            {
                $("#up_btn").attr("disabled",true);
                if(data.code==200){
                    $("#pic").attr("src", '/storage/'+data.path);
                    alert(data.msg);
                }
                else{
                    alert(data.msg);
                }
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
                alert(e);
            }
        });
    return false;
}
</script>
